<template>
	<ele-modal :width="950" :visible="visible" :confirm-loading="loading"
		:title="actionStatus == 'edit' ? '修改会员' : '新建会员'" :body-style="{ paddingBottom: '8px' }"
		@update:visible="updateVisible" @ok="save">
		<a-form :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
			:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }">
			<a-row :gutter="24">
				<a-col :md="12" :sm="24" :xs="24">
					<a-form-item label="会员卡号" :colon="false">
						<div>{{card_num}}</div>
					</a-form-item>
					<a-form-item label="姓名">
						<a-input allow-clear placeholder="请输入姓名" v-model:value="form.name" autocomplete="off" />
					</a-form-item>
					<a-form-item label="昵称">
						<a-input allow-clear placeholder="请输入昵称" v-model:value="form.nickname" autocomplete="off" />
					</a-form-item>
					<a-form-item label="性别">
						<a-select optionFilterProp="label" allow-clear v-model:value="form.sex" placeholder="请选择性别"
							@change="sexChange">
							<a-select-option value="男">男</a-select-option>
							<a-select-option value="女">女</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="会员等级">
						<a-select optionFilterProp="label" :options="levelOptions" allow-clear v-model:value="form.level"
							placeholder="请选择角色" @change="levelChange" autocomplete="off" />
					</a-form-item>
					<a-form-item label="生日">
						<a-row>
							<a-col :md="16" :sm="16" :xs="16">
								<!-- <a-date-picker class="ele-fluid" valueFormat="MM-DD" placeholder="请选择"
									v-model:value="form.birthday" autocomplete="off" /> -->
								<a-date-picker class="ele-fluid" valueFormat="MM-DD" placeholder="请选择"
									v-model:value="form.birthday" :format="customWeekStartEndFormat" autocomplete="off" />
							</a-col>
							<a-col :md="8" :sm="8" :xs="8" style="text-align:right">
								<a-checkbox v-model:checked="birthday_type" @change="change">农历</a-checkbox>
							</a-col>
						</a-row>
					</a-form-item>
					<a-form-item label="婚姻状况">
						<a-select optionFilterProp="label" allow-clear v-model:value="form.marital" placeholder="请选择"
							@change="marriageChange">
							<a-select-option value="1">未知</a-select-option>
							<a-select-option value="2">未婚</a-select-option>
							<a-select-option value="3">已婚</a-select-option>
							<a-select-option value="4">离异</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="历史积分">
						<a-input allow-clear placeholder="请输入" v-model:value="form.history_points" autocomplete="off" />
					</a-form-item>
					<a-form-item label="备注">
						<a-textarea placeholder="请输入备注" allow-clear v-model:value="form.note" />
					</a-form-item>
				</a-col>
				<a-col :md="12" :sm="24" :xs="24">
					<a-form-item label="">
					</a-form-item>
					<a-form-item label="手机号" v-bind="validateInfos.mobile">
						<a-input allow-clear placeholder="请输入手机号" v-model:value="form.mobile" autocomplete="off" />
					</a-form-item>
					<a-form-item label="证件号">
						<a-input allow-clear placeholder="请输入" v-model:value="form.id_num" autocomplete="off" />
					</a-form-item>
					<a-form-item label="地区">
						<a-cascader :fieldNames="fieldNames" placeholder="请选择所在地区" :options="options" v-model:value="defaultValue" @change="changeRegion" />
					</a-form-item>
					<a-form-item label="入会时间" v-bind="validateInfos.join_time">
						<a-date-picker class="ele-fluid" valueFormat="YYYY/MM/DD" placeholder="请选择"
							v-model:value="form.join_time" autocomplete="off" />
					</a-form-item>
					<a-form-item label="出生日期">
						<a-date-picker class="ele-fluid" valueFormat="YYYY/MM/DD" placeholder="请选择"
							v-model:value="form.birth" autocomplete="off" />
					</a-form-item>
					<a-form-item label="纪念日">
						<a-date-picker class="ele-fluid" valueFormat="YYYY/MM/DD" placeholder="请选择"
							v-model:value="form.commemoration" autocomplete="off" />
					</a-form-item>
					<a-form-item label="积分有效期">
						<a-date-picker class="ele-fluid" valueFormat="YYYY/MM/DD" placeholder="请选择"
							v-model:value="form.points_valid" autocomplete="off" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</ele-modal>
</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue';
	import dayjs from 'dayjs';
	import {Form} from 'ant-design-vue';
	import {uploadUrl} from '@/config/setting';
	import {emailReg,phoneReg,identityReg} from 'ele-admin-pro';
	import {PlusOutlined,LoadingOutlined} from '@ant-design/icons-vue';
	import { get_address } from '@/api/tenant/store';
	import { get_role_select } from '@/api/material/select';
	import { member_level_get_setting } from '@/api/member/get_setting';
	import { detail } from '@/api/member/get_list';

	// 表格列配置
	const useForm = Form.useForm;

	const props = defineProps({
		// 弹窗是否打开
		visible: Boolean,
		// 编辑edit/新建add
		actionStatus: String,
		// 编辑数据id
		editDataId: [String, Number],
		storeId: String
	});

	const emit = defineEmits(['done', 'update:visible']);
	const levelOptions = ref([]);
	const options = ref([]);
	const card_num = ref(null);
	const defaultValue = ref(null);
	const birthday_type = ref(false);
	// 地址选择下拉框更改label、balue
	const fieldNames = ref({
	  label: 'label',
	  value: 'value'
	});
	
	const weekFormat = 'MM-DD';
	const customWeekStartEndFormat = value => `${dayjs(value).format(weekFormat)}`

	onMounted(() => {
		member_level_get_setting().then((res) => {
			res.level.forEach(item=>{
				levelOptions.value.push({
					label:item.name,
					value:item.level
				})
			})
		});
		get_address().then((res) => {
		  options.value = res;
		});
		form.id = props.editDataId;
		if (props.editDataId) {
			detail({
				id: props.editDataId
			}).then((res) => {
				Object.keys(form).map((key) => {
					if (res.info) {
						form[key] =
							res && res[key] ?
							String(res[key]) :
							res.info[key] ?
							String(res.info[key]) :
							null;
						if (key == 'level') {
							form[key] = Number(res.info[key]);
						}
						if (key == 'birthday_type') {
							birthday_type.value = res['birthday_type'] == 1 ? true : false;
						}
					}
				});
				defaultValue.value = res.region_name;
				card_num.value = res.card_num;
				console.log('from===', form);
			});
		}
	});
	
	const changeRegion = (e) => {
	  console.log('地区改变：', e);
	  form.region = e[e.length - 1];
	};
	const change = (e) => {
	  form.birthday_type = e.target.checked ? 1 : 0;
	};
	/* 更新婚姻选中数据 */
	const marriageChange = (e) => {
	  form.marital = e;
	};
	/* 更新性别选中数据 */
	const sexChange = (value) => {
		console.log('性别', value);
		form.sex = value;
	};
	/* 更新会员等级选中数据 */
	const levelChange = (value) => {
		console.log('会员等级', value);
		form.level = value;
	};

	// 提交状态
	const loading = ref(false);

	// 表单数据
	const form = reactive({
		name: '',
		id_num: '',
		mobile: '',
		level: null,
		nickname: '',
		sex: null,
		region: null,
		marital: null,
		history_points: '',
		points_valid: null,
		join_time: '',
		birth: '',
		birthday: '',
		birthday_type: 0,
		commemoration: '',
		note: ''
	});
	// 表单验证规则
	const rules = reactive({
		mobile: [{
			required: true,
			message: '请输入手机号',
			type: 'string',
			trigger: 'blur'
		}],
		join_time: [{
			required: true,
			message: '请选择入会时间',
			type: 'string',
			trigger: 'blur'
		}]
	});

	const {
		validate,
		validateInfos
	} = useForm(form, rules);
	/* 保存编辑 */
	const save = () => {
		validate().then(() => {
			console.log('form===',   form);
			emit('done', form);
		}).catch(() => {});
	};
	/* 更新visible */
	const updateVisible = (value) => {
		emit('update:visible', value);
	};
</script>
<style scoped></style>